<template>
  <div class="hotStack">
    <h3>今日热点</h3>
    <!-- <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="item in arrQuotes" :key="item.quote.symbol">
        <h5>{{ item.quote.name }}</h5>
        <h5 :class="item.quote.chg > 0 ? 'red' : 'green'">
          {{ item.quote.current }}
        </h5>
        <p :class="item.quote.chg > 0 ? 'red' : 'green'">
          {{ item.quote.chg }} %
        </p>
      </van-grid-item>
    </van-grid> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="i in swiperNum" :key="i">
        <van-grid :border="false" :column-num="3">
          <van-grid-item
            v-for="item in arrQuotes.slice((i - 1) * 3, i * 3)"
            :key="item.quote.symbol"
          >
            <h5>{{ item.quote.name }}</h5>
            <h5 :class="item.quote.chg > 0 ? 'red' : 'green'">
              {{ item.quote.current }}
            </h5>
            <p :class="item.quote.chg > 0 ? 'red' : 'green'">
              {{ item.quote.chg }} %
            </p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { getQuotes } from "@/api";
import { Swipe, SwipeItem, Grid, GridItem } from "vant";

export default {
  name: "",
  async mounted() {
    let res = await getQuotes();
    this.arrQuotes = res.data.items;
  },
  data() {
    return {
      arrQuotes: [],
    };
  },
  computed: {
    swiperNum() {
      return Math.ceil(this.arrQuotes.length / 3);
    },
  },
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
    "van-grid": Grid,
    "van-grid-item": GridItem,
  },
};
</script>

<style scoped lang="less">
h3 {
  margin: 0.2rem;
  font-size: 0.45rem;
  padding: 0.1rem;
  text-align: center;
}
h5 {
  width: 100%;
  margin: 0.1rem;
  font-size: 0.45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
p {
  margin: 0.1rem;
  font-size: 0.4rem;
  text-align: center;
}

.green {
  color: darkgreen;
}
.red {
  color: orangered;
}
.hotStack ::v-deep .van-swipe__indicator {
  background-color: #666;
}
.hotStack ::v-deep .van-grid-item {
  width: 33.33%;
}
</style>
